<template>
	<view class="container">
        <u-toast ref="uToast" />
		<div class="header clearfix">
			<u-avatar class="avatar fl" :src="avatarUrl" :size="100"></u-avatar>
			<button v-if="!userName" class='user-name no_btn fl' type='primary' @click="toLogin">点击登录</button>
			<view v-else class="user-name fl">{{userName}}</view>
		</div>
		<div class="card">
			<u-grid class="grids" :border="false" :col="3">
				<u-grid-item @click="toOrder">
					<img class="grid-img" src="../../static/img/my-orders.png">
					<view class="grid-text">我的订单</view>
				</u-grid-item>
				<u-grid-item @click="noPage">
					<img class="grid-img" src="../../static/img/my-set-menu.png">
					<view class="grid-text">我的套餐</view>
				</u-grid-item>
				<u-grid-item @click="noPage">
					<img class="grid-img" src="../../static/img/my-msg.png">
					<view class="grid-text">我的消息</view>
				</u-grid-item>
			</u-grid>
		</div>
		<view class="sections">
			<view class="section" @click="toContact">
				<img class="section-img" src="../../static/img/about.png" alt="">
				<view class="section-table">关于我们</view>
				<u-icon name="arrow-right" color="#666" size="28"></u-icon>
			</view>
			<view class="section" @click="noPage">
				<img class="section-img" src="../../static/img/suggest.png" alt="">
				<view class="section-table">投诉建议</view>
				<u-icon name="arrow-right" color="#666" size="28"></u-icon>
			</view>
			<view class="section" @click="toInfo">
				<img class="section-img" src="../../static/img/setting.png" alt="">
				<view class="section-table">设置</view>
				<u-icon name="arrow-right" color="#666" size="28"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
    import Vue from 'vue';

	export default Vue.extend({
		data() {
			return {
				$u: {
					route: Object
				},
				title: 'Mine',
				avatarUrl: '',
				userName: '',
				phone: ''
			}
		},
		onShow() {
			this.userName = getApp().globalData.userName
		},
		methods: {
			toContact(){
				this.$u.route('pages/contact/contact')
			},
			toOrder(){
				this.$u.route('pages/orderList/orderList')
			},
			noPage(){
				this.$refs.uToast.show({
				    title: '敬请期待',
				    type: 'default',
                })
			},
            toLogin() {
				this.$u.route('pages/login/login')
            },
			toInfo(){
				if(this.userName){
					this.$u.route('pages/info/info')
				} else {
					this.toLogin()
				}
			}
		}
	});
</script>

<style lang="scss" scoped>
@import '../../assets/scss/common.scss';

.container{
	position: relative;
	height: 100vh;
	overflow: hidden;
	background-color: #efefef;
}
.header{
	background-color: #59C4CA;
	padding: 60rpx 0 100rpx 0;
	overflow: hidden;
	box-sizing: border-box;
	margin-bottom: 10rpx;
	.avatar{
		margin: 0 30rpx;
	}
	.user-name{
		display: inline-block;
		height: 100rpx;
		font-size: 32rpx;
		color: #fff;
		line-height: 100rpx;
	}
	.no_btn{
		background-color: transparent;
		border: none;
		padding: 0;
		margin: 0;
	}
	.no_btn::after{
		display: none;
	}
}
.grids{
	.grid-img{
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 20rpx;
	}
}
.sections{
	// width: 100%;
	background-color: #fff;
	border-radius: 10rpx;
	margin: 60rpx 20rpx 0;
	.section{
		padding: 30rpx 30rpx;
		display: flex;
		.section-img{
			width: 40rpx;
			height: 40rpx;
			flex: none;
			margin-right: 20rpx;
		}
		.section-table{
			flex: auto;
			line-height: 40rpx;
		}
	}
}

.card{
	box-shadow: 0 3rpx 1rpx 1rpx #eee;
	border-radius: 20rpx;
	padding: 20rpx;
	margin: -80rpx 30rpx 0;
	background-color: #fff;
}
</style>
